<template>
  <div>
    <a-card>
      <a-row :gutter="48">
        <div class="table-page-search-wrapper">
          <a-col :md="7" :sm="24"><h1 style="font-weight:bold">{{ $t('all.autotext1172') }}(SMO)</h1></a-col>
          <a-col :md="14" :sm="24"></a-col>
        </div>
      </a-row>
      <div class="table-page-search-wrapper">
        <a-form-model layout="inline" :model="queryParam">
          <a-row :gutter="48">
            <a-col :md="7" :sm="24">
              <a-form-model-item :label="$t('all.autotext1434')" labelAlign="left">
                <a-input v-model="queryParam.kw" />
              </a-form-model-item>
            </a-col>
            <a-col :md="14" :sm="24">
              <a-button @click="activeSearch" type="primary" class="search">{{ $t('all.autotext1378') }}</a-button>
              <a-button
                @click="activeReset"
                type="default"
                class="search"
                style="margin-left:20px;"
              >
                {{ $t('all.autotext340') }}
              </a-button>
            </a-col>
            <a-col :md="2" :sm="24">
              <a-button type="primary" @click="handleAdd">{{ $t('all.autotext409') }}</a-button>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <s-table
        ref="table"
        size="default"
        :rowKey="record => record.id"
        :columns="columns"
        :data="loadData"
      >
        <span slot="operation" slot-scope="text, record">
          <template>
            <a @click="openEditor(record)">{{ $t('all.autotext919') }}</a>
            <a-divider type="vertical" />
            <a @click="openDetails(record)">{{ $t('all.autotext822') }}</a>
            <a-divider type="vertical" />
            <a-popconfirm
              :title="$t('all.autotext718')"
              :ok-text="$t('all.autotext792')"
              :cancel-text="$t('all.autotext975')"
              @confirm="confirm(record)"
            >
              <a>{{ $t('all.autotext379') }}</a>
            </a-popconfirm>
          </template>
        </span>
      </s-table>
      <AddModal
        :visible="showModal"
        @modalOk="addSubmit"
        @modalCancel="addCancel"
        :type="currentType"
        :openType="openType"
        :editContent="modify"
      />
    </a-card>
  </div>
</template>
<script>
import {
  getInstitutionsList,
  getInstitutionsDelete,
  getInstitutionsDetail,
  getInstitutionsAdd,
  getInstitutionsUpdate
} from '@/api/organization/organization'
import AddModal from './AddModal.vue'
export default {
  props: {
    stateAgencies: {
      type: Number,
      default: null
    }
  },
  components: {
    AddModal
  },
  data () {
    return {
      openType: 0,
      currentType: 3,
      modify: {}, // 编辑某一行
      detailsInfo: {}, // 编辑某一行
      // tab切换时，更改queryParams中的状态字段。
      queryParam: {
        kw: '',
        type: 3
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getInstitutionsList(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      },
      currentId: null,
      showModal: false,
      detailsModal: false,
      columns: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: this.$t('all.autotext1172') + '(SMO)',
          dataIndex: 'orgName'
        },
        {
          title: this.$t('all.autotext651'),
          dataIndex: 'orgCode'
        },
        {
          title: this.$t('all.autotext348'),
          dataIndex: 'englishName'
        },
        {
          title: this.$t('all.autotext692'),
          dataIndex: 'shortName'
        },
        {
          title: this.$t('all.autotext496'),
          dataIndex: 'type'
        },
        {
          title: this.$t('all.autotext275'),
          dataIndex: 'address'
        },
        {
          title: this.$t('all.autotext647'),
          dataIndex: 'contacts'
        },
        {
          title: this.$t('all.autotext878'),
          dataIndex: 'phone'
        },
        {
          title: this.$t('all.autotext1062'),
          dataIndex: 'email'
        },
        {
          title: this.$t('all.autotext187'),
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ]
    }
  },
  mounted () {},
  methods: {
    // 搜索
    activeSearch () {
      this.$refs.table.refresh(true)
    },
    // 重置
    activeReset () {
      this.queryParam = {}
      this.queryParam.type = 3
      this.$refs.table.refresh(true)
    },
    // 点击弹出新增表单
    handleAdd () {
      this.modify = {}
      this.openType = 0
      this.showModal = true
    },
    // 点击编辑这一行
    openEditor (record) {
      this.currentId = record.id
      getInstitutionsDetail({ id: record.id }).then(res => {
        const { orgName, orgCode, englishName, shortName, address, contacts, phone, email } = res
        this.modify = { orgName, orgCode, englishName, shortName, address, contacts, phone, email }
        this.openType = 1
        setTimeout(() => {
          this.showModal = true
        }, 10)
      })
    },
    // 点击删除这一行
    confirm (record) {
      getInstitutionsDelete({ id: record.id, type: 1 }).then(res => {
        this.$message.success(this.$t('all.autotext1455'))
        this.$refs.table.refresh(true)
      })
    },
    // 点击查看这一行详情
    openDetails (record) {
      getInstitutionsDetail({ id: record.id }).then(res => {
        const { orgName, orgCode, englishName, shortName, address, contacts, phone, email } = res
        this.modify = { orgName, orgCode, englishName, shortName, address, contacts, phone, email }
        this.openType = 2
        setTimeout(() => {
          this.showModal = true
        }, 10)
      })
    },
    // 点击确认新增
    addSubmit (e) {
      if (this.openType === 0) {
        getInstitutionsAdd({ ...e, type: this.currentType }).then(res => {
          this.showModal = false
          this.$message.success(this.$t('all.autotext1243'))
          this.$refs.table.refresh(true)
        })
      } else {
        getInstitutionsUpdate({ ...e, id: this.currentId, type: this.currentType }).then(res => {
          this.$message.success(this.$t('all.autotext529'))
          this.showModal = false
          this.$refs.table.refresh(true)
        })
      }
    },
    addCancel () {
      this.showModal = false
    }
  }
}
</script>
<style></style>
